<template>
	<view class="page">
		<view class="content_box">
			<view class="content_top_box">
				<view class="content_num_box">
					<view class="content_num_left_box">
						<view class="content_num_left_top_box">
							{{packetObj.total_num||''}}
						</view>
						<view class="content_num_left_bot_box">
							大王币
						</view>
					</view>
					<view class="content_num_right_box">
						<view class="content_num_right_top_box">
							{{packetObj.amount||''}}
						</view>
						<view class="content_num_right_bot_box">
							剩余大王币
						</view>
					</view>
				</view>
				<view class="pakect_id_box">
					ID:{{packetObj.id||''}}
				</view>
				<view class="share_vx_box" @click="shareVx">
					分享红包
				</view>
			</view>
		</view>
		<scroll-view class="scl_box" scroll-y>
			<view class="scr_title">
				<view class="scr_title_left_box">
					大家的手气
				</view>
				<view class="scr_title_right_box">
					规则说明
				</view>

			</view>
			<view class="scr_dange_box" v-for="(item,index) in  packetList" :key="index">
				<view class="scr_dange_left_box">
					<view class="touxiang_box">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="name_box">
						<view class="name_top_box">
							{{item.avatar}}
						</view>
						<view class="name_bot_box">
							{{item.create_time | formatDate('-')}}
						</view>
					</view>
				</view>
				<view class="scr_dange_right_box">
					<view class="scr_dange_right_top_box">
						{{item.integral}}
					</view>
					<view class="scr_dange_right_bot_box">
						大王币
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Id: '', //红包id
				packetList: [],
				packetObj:{
					total_num:'',
					amount:'',
					id:'',
					
				},
				img:'https://new.qingfentool.vip/upload/image/20230926/546aae2ccbd3fe0332dd4d1c9f49e320.jpg'
			}
		},
		onLoad(e) {
			this.Id = e.id
			console.log(this.Id, "chuan")
		},
		onShow() {
			this.init()
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			}
		},
		methods: {
			init() {
				let data = {
					id: this.Id
				}
				console.log(data)
				this.$Request.get(this.$api.user.packetreceiveLog, data).then((res) => {
					console.log(res,'用户')
					this.packetList = res.data.list.user
					this.packetObj = res.data.list
				})
			},
			shareVx() {
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: this.img,
					title: '拼手气红包',
					miniProgram: {
						id: 'gh_fee2a9ecb3f0',
						path: 'pages/index/user?id=' + this.Id + '&name=' + this.$store.state.userInfo.nickname, //地址
						webUrl: this.img,
						type: 0,
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					},
					fail: err => {
						console.log("err", err)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(180deg, #141414 0%, #514A3B 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top: 30rpx;


		.content_box {
			width: 644rpx;
			height: 464rpx;
			// background: #191919;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: auto;
			background-image: url('https://new.qingfentool.vip/upload/image/20230924/3765ad6e6fe1b77f2e2fffb552f128ec.jpg');
			background-size: 100% 100%;


			.content_top_box {
				width: 566rpx;
				height: 332rpx;

				// background: linear-gradient(360deg, #E7B17F 0%, #F6D5B7 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: auto;

				.content_num_box {
					width: 100%;
					height: 180rpx;
					display: flex;
					justify-content: space-between;
					padding-top: 32rpx;
					margin-bottom: 13rpx;

					.content_num_left_box {
						width: 50%;
						height: 100%;
						border-right: 1rpx solid #707070;
						text-align: center;

						.content_num_left_top_box {
							height: 138rpx;
							font-size: 116rpx;
							font-family: DINSchrift-Regular, DINSchrift;
							font-weight: 400;
							color: #000000;
						}

						.content_num_left_bot_box {
							height: 35rpx;
							font-size: 26rpx;
							font-family: Arial-Bold, Arial;
							font-weight: bold;
							color: #000000;
						}

					}

					.content_num_right_box {
						width: 49%;
						height: 100%;
						text-align: center;

						.content_num_right_top_box {
							height: 138rpx;
							font-size: 116rpx;
							font-family: DINSchrift-Regular, DINSchrift;
							font-weight: 400;
							color: #000000;
						}

						.content_num_right_bot_box {
							height: 35rpx;
							font-size: 26rpx;
							font-family: Arial-Bold, Arial;
							font-weight: bold;
							color: #000000;
						}
					}
				}

				.pakect_id_box {
					width: 100%;
					height: 29rpx;
					text-align: center;
					font-size: 22rpx;
					font-family: Microsoft YaHei-Regular, Microsoft YaHei;
					font-weight: 400;
					color: #74614F;
					margin-bottom: 115rpx;
				}

				.share_vx_box {
					width: 240rpx;
					height: 76rpx;
					background: linear-gradient(180deg, #E7B17F 0%, #F6D5B7 100%);
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					opacity: 1;
					margin: auto;
					font-size: 30rpx;
					font-family: Arial-Bold, Arial;
					font-weight: bold;
					color: #000000;
					text-align: center;
					line-height: 76rpx;
				}
			}
		}

		.scl_box {
			width: 100%;
			height: calc(100vh - 494rpx);
			background: #000;
			box-shadow: 0rpx -5rpx 20rpx 1rpx rgba(0, 0, 0, 0.45);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;

			.scr_title {
				width: 100%;
				height: 92rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 92rpx;
				padding: 0 30rpx;

				.scr_title_left_box {
					font-size: 26rpx;
					font-family: Arial-Bold, Arial;
					font-weight: bold;
					color: #E8B383;
				}

				.scr_title_right_box {
					font-size: 22rpx;
					font-family: Microsoft YaHei-Regular, Microsoft YaHei;
					font-weight: 400;
					color: #A8A8A8;
				}


			}

			.scr_dange_box {
				width: 690rpx;
				height: 120rpx;
				background: #191919;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				opacity: 1;
				margin: auto;
				margin-bottom: 16rpx;
				padding: 0 32rpx 0 23rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.scr_dange_left_box {
					width: 65%;
					height: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.touxiang_box {
						width: 63rpx;
						height: 63rpx;
						border-radius: 50%;
						background-color: #fff;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.name_box {
						height: 63rpx;

						.name_top_box {
							height: 32rpx;
							font-size: 24rpx;
							font-family: Arial-Bold, Arial;
							font-weight: bold;
							color: #FFFFFF;
							margin-bottom: 10rpx;
						}

						.name_bot_box {
							height: 22rpx;
							font-size: 20rpx;
							font-family: Arial-Regular, Arial;
							font-weight: 400;
							color: #707070;
						}
					}
				}

				.scr_dange_right_box {
					width: 30%;
					height: 100%;
					padding-top: 32rpx;
					text-align: right;

					.scr_dange_right_top_box {
						height: 30rpx;
						font-size: 26rpx;
						font-family: Arial-Bold, Arial;
						font-weight: bold;
						color: #E8B383;
					}

					.scr_dange_right_bot_box {
						height: 27rpx;
						font-size: 20rpx;
						font-family: Arial-Regular, Arial;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}

	}
</style>